<template>
	<ynet-content id="roleMain" :headerInformation="true" :headerMenu="true" class="main-container">
		<div >
			<ynet-breadcrumb></ynet-breadcrumb>
		</div>
		<div v-if="main">
			<div>
				<el-form ref="queryForm" :model="queryForm" class="formEmbedTable mt20">
					<table>
						<caption>Query</caption>
						<tr>
							<td>Role No.:</td>
							<td>
								<el-form-item prop="roleNo">
									<el-input v-model="queryForm.roleNo" @focus="cleanOther()"></el-input>
								</el-form-item>
							</td>
							<td>Role Name:</td>
							<td>
								<el-form-item prop="roleName">
									<el-input v-model="queryForm.roleName" @focus="cleanOther()"></el-input>
								</el-form-item>
							</td>					
						</tr>
					</table>
				</el-form>
			</div>
			<div class="btnArea mt20 tac">
				<el-button type="primary" icon="search" @click="submitForm('queryForm')" >Search</el-button>
				<el-button type="primary" icon="edit" @click="cleanOther()">Reset</el-button>
			</div>
			<div id="SearchResult" class=" mt20 tableData" ref="mulTiSelect">
				<el-table :data="imRoleList" @select="handleSelectionChange">
					<el-table-column  type="selection" align="center" label="select"></el-table-column>
					<el-table-column prop="roleNo" label="Role No." align="center">
						<template scope="scope">
							<el-button @click="queryDetail(scope.row.roleNo)" type="text"><p>{{scope.row.roleNo}}</p></el-button>
						</template>
					</el-table-column>
					<el-table-column prop="roleName" label="Role Name" align="center"></el-table-column>
					<el-table-column prop="branchName" label="Create Department" align="center"></el-table-column>
				</el-table>
			</div>
			<div class="pagination tar mt20">
            	<el-pagination  @current-change="handleCurrentChange" :current-page="Number(queryForm.currentPage)" :page-size="Number(queryForm.turnPageShowNum)" layout="total, prev, pager, next, jumper" :total="Number(turnPageTotalNum)"></el-pagination>
            </div>
			<div class="btnArea mt20 tac">
				<el-button type="primary" icon="search" @click="add()" >Add</el-button>
				<el-button type="primary" icon="edit" @click="update()">Modify</el-button>
				<el-button type="primary" icon="edit" @click="confirmDialog()">Delete</el-button>
			</div>
			<!-- 授权弹窗 -->
			<div>
				<ynet-authDialog ref="dialogTable"  @getAuthForm="getAuthForm"></ynet-authDialog>
			</div>
		</div>
		<div >
            <RoleModify v-if="isUpdate" :editForm="editForm"  :roleBsnDetail="roleBsnDetail"  @backMenu="backMenu"></RoleModify>
			<RoleDetail v-if="isDetail" :roleBsnDetail="roleBsnDetail" :roleDetail="roleDetail" @backMenu="backMenu"></RoleDetail>
			<RoleAdd v-if="isAdd" @backMenu="backMenu"></RoleAdd>
		</div>	
	</ynet-content>
</template>

<script>
	import RoleAdd from './components/roleAdd';
	import RoleModify from './components/roleModify';
	import RoleDetail from './components/RoleDetail';
	
	export default {
		name:'BrachMain',
		components:{
			//RoleSearch,
			RoleAdd,
			RoleModify,
			RoleDetail,
		},
		data(){
            return{
				turnPageTotalNum:'',
                val:[],main:true,
				isDetail:false,
				isUpdate:false,
				roleBsnDetail:[],//传给详情页的数据
				isAdd:false,
				queryForm:{
                    roleType:'',roleNo:'',roleName:'',queryFlag:'',currentPage:'1',turnPageShowNum:'10'
                },
				selectData:[],
				editForm:{},//传给修改页面的值
				imRoleList:[],//从后台查询的角色信息
				imRoleBsnList:[],//从后台查询的角色菜单权限
				roleDetail:{},//传给修改页 详情页的角色详情信息
				delForm:{
                    imRoleList:[],actionType:'2',bsnCode:'IM0102',
                },
				dialogTableVisible:false,
                authForm: { authUserNo: '', password: '',randomField:''},//授权数据
				needAuth:'',
                authType:'',
				menuTree:[]
            }
            
        },
		mounted(){
			this.$tools.request(this,"IM000003Action.do").then(data=>{
				let menuCopy=data.body.operRoleMenuList
				this.$tools.storage.set("menuCopy", menuCopy)
			})
		},
		methods:{
			confirmDialog(){//删除确认弹窗
				if(this.selectData.length>0){
					this.$confirm('Confirm to delete','warning',{
						confirmButtonText:'Confirm',
						cancelButtonText:'Cancel',
						type:'warning'
					}).then(()=>{
						this.queryAuth();
					}).catch(()=>{

					})
				}else{
					this.$alert('select at least one','warning',{
						confirmButtonText:'Confirm'
					})
				}
			},
			getAuthForm(val){
                //获取授权数据
                this.authForm=val;
                //console.log("val:"+JSON.stringify(val));
				this.delForm=$.extend({},this.delForm,this.authForm)
                this.deleteRole()
            },
			queryAuth(){//查询授权模式
				let body={};body.bsnCode="IM0102";body.version="IM0102",
				this.$tools.request(this,"IM010001Action.do",body).then(data=>{
					if(data.body.needAuth.match(/^0$/)){//无需授权
						this.deleteRole()
					}else if(data.body.needAuth==1 && data.body.authType==1){
						this.needAuth=1;
                        this.authType=1;
						this.$refs["dialogTable"].show()
					}else if( data.body.needAuth==1 && data.body.authType==2 ){
						this.needAuth=1;
                        this.authType=2;
						this.deleteRole()
					}else{
						this.$alert('Authorization type error', 'warning', {
							confirmButtonText: 'Confirm',
							callback: action => {
							}
						});
					}
				})
			},
			handleCurrentChange(val) {//分页方法
                this.queryForm.currentPage=val;
                this.submitForm()
            },
			cleanOther() {
				let _this = this

				_this.$refs.queryForm.resetFields()
			},
			update(){
				
			 
				this.roleBsnDetail=[];	
				if(this.selectData.length==1){	
					this.editForm=this.selectData[0];
					console.log("editForm:"+JSON.stringify(this.editForm))
					if(this.editForm.roleType==0 || this.editForm.roleType==1){
						this.$alert("default role can not modify","warning",{
							confirmButtonText:'Confirm',
						})
					}else{
						this.isUpdate=true;	
						this.main=false;
						for(let i=0;i<this.imRoleBsnList.length;i++){//循环的到角色菜单列表
							if(this.imRoleBsnList[i].roleNo==this.editForm.roleNo){
								this.roleBsnDetail.push(this.imRoleBsnList[i])
							}
						};
					}
					
					
				}else{
					this.$alert("select one","warning",{
						confirmButtonText:'Confirm',
						callback: action => {
							this.$refs.mulTiSelect.clearSelection()
						}
					})
				}
				
			},
			add(){
				//this.addForm1=this.selectData[0];
				this.isAdd=true;
				this.main=false;
			},
			submitForm(){//查询角色信息列表
				//查询
				let _this = this
				if (_this.queryForm.roleName) {
					_this.queryForm.queryFlag = 1
				}else{
					_this.queryForm.queryFlag="";
				}
				console.log("queryForm:"+JSON.stringify(this.queryForm))
				_this.$tools.request(this, "IM010201Action.do", this.queryForm).then(data => {
					//console.log(JSON.stringify(data))
					if (data.body.errorCode == 0) {
						//闲置控
						this.imRoleList=[];
						this.imRoleBsnList=[];
						this.imRoleList=data.body.imRoleList;
						this.imRoleBsnList=data.body.imRoleBsnList;
						this.turnPageTotalNum=data.body.turnPageTotalNum;
					} else {
						this.$alert("System Error Try again", "warning", 'Warning', {
							confirmButtonText: 'Confirm',
							callback: action => {
							}
						});
					}
				})
			},
            queryDetail(val){//点击角色编号查询详细信息
				this.roleDetail={};//先置空
				this.roleBsnDetail=[];
				this.isDetail=true;
				this.main=false;
				this.isAdd=false;
				this.isUpdate=false;
				for(let i=0;i<this.imRoleBsnList.length;i++){//循环的到角色菜单列表
					if(this.imRoleBsnList[i].roleNo===val){
						this.roleBsnDetail.push(this.imRoleBsnList[i]);
					}
				};
				for(let i=0;i<this.imRoleList.length;i++){//循环得到角色信息
					if(this.imRoleList[i].roleNo==val){
						this.roleDetail=this.imRoleList[i];
						break;
					}
				};
            },
			deleteRole(){//删除角色
				this.delForm.imRoleList=this.selectData;
				console.log(JSON.stringify(this.delForm))
				this.$tools.request(this,"IM010202Action.do",this.delForm).then(data=>{
					if(data.body.errorCode==0){
						if(this.needAuth==1 && this.authType==2){
							this.$alert('Waiting for Authorized', 'Success', {
								confirmButtonText: 'Confirm',
								callback: action => {
									this.submitForm()
								}
							});
						} else if(this.needAuth==1 && this.authType==1){
							if(data.body.authStatus==1){
								this.$alert("Authorship No. or password wrong ,please resume load","warning",{
									confirmButtonText: 'Confirm',
								})
							}else{
								this.$alert("Success","Success",{
									confirmButtonText: 'Confirm',
									callback: action => {
										this.submitForm()
									}
								})
								
							}
						}else{
							this.$alert("Success","Success",{
								confirmButtonText: 'Confirm',
								callback: action => {
									this.submitForm()
								}
							})
						}
						
					}else{
						this.$alert("System Error Try again", "warning","warning",{
							confirmButtonText: 'Confirm',
							callback: action => {
							}
						})
					}
				})
			},
			backMenu(){
				this.main=true;
				this.isAdd=false;
				this.isUpdate=false;
				this.isDetail=false;
				this.submitForm()
			},
			handleSelectionChange(val){
				//选择项数据
				this.selectData=val;
				//console.log("val::"+JSON.stringify(this.selectData))
			},
			resetForm(formName){
				this.$ref[formName].resetFields()
			},
			
		}
	}
</script>